<template>
  <body-page>

    <!-- 表头按钮 -->
    <div class="list-page-header">
      <slot name="table-header"></slot>
    </div>

    <!-- 表格 表单 -->
    <div class="list-page-body">
      <slot name="table-body"></slot>
    </div>

    <!-- 分页组件 -->
    <div class="list-page-pagination">
      <el-pagination v-if="showPager"
        @size-change="onPageSizeChange"
        @current-change="onPageCurrentChange"
        :current-page="pager.current"
        :page-size="pager.size"
        :total="pager.total"
        :page-sizes="[10, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>

  </body-page>
</template>

<script>
import BodyPage from './BodyPage'
export default {
  name: 'ListPage',
  components: {BodyPage},
  props: {
    // 是否显示分页组件
    showPager: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 分页数据 由调用者传入参数
    pager: {
      type: Object,
      default: function () {
        return {
          current: 1, // 当前页
          size: 10, // 每页显示条数
          total: 0 // 总数
        }
      }
    }
  },
  methods: {
    onPageSizeChange (e) { // pageSize改变
      this.pager.size = e
    },
    onPageCurrentChange (e) { // 当前页改变
      this.pager.current = e
    }
  }
}
</script>

<style scoped>

  .list-body-header {
  }

  .list-page-body {
    background-color: #ffffff;
    margin-top: 10px;
    padding: 20px;
  }

  .list-page-pagination {
    text-align: center;
    margin-top: 10px;
  }

</style>
